<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="./jquery-3.6.0.js"></script>
<script src="./city.js"></script>
<style>

</style>

<body>
  <div>
    <select name="" id="sheng">
      <option value="">请选择省</option>
    </select>
    <select name="" id="city">
      <option value="">请选择市</option>
    </select>
    <select name="" id="area">
      <option value="">请选择区</option>
    </select>
  </div>
</body>
<script>
  $(function () {
    var sheng = ""
    for (var i in citys) {
      sheng += `<option value="${i}">${citys[i].name}</option>`
    }
    $("#sheng").append(sheng)

    $("#sheng").change(function () {
      $("#city option:gt(0)").remove()
      var data = citys[$(this).val()].city,
        shi = ""
      for (var i in data) {
        shi += `<option value="${$(this).val()}-${i}">${data[i].name}</option>`
      }
      $("#city").append(shi)
    })

    $("#city").change(function () {
      $("#area option:gt(0)").remove()
      var data = $(this).val().split("-")
      // console.log(data);
      var area = citys[data[0]].city[data[1]].area
      // console.log(area[i])
      var qu = ""
      for (i in area) {
        qu += `<option value="">${area[i]}</option>`
      }
      $("#area").append(qu)
    })
  })
</script>

</html>